<template>
  <div class="player">
    <!-- 内容区域 -->
    <div class="play_content w">
      <!-- 右边的定位的 部分 -->
      <div class="play_content_nav">
        <ul>
          <li
            :class="leftNav == item.id ? 'active' : null"
            v-for="item in leftNavData"
            :key="item.id"
            @click="leftNavClickMethod(item)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <!-- 主体区域板块 (音乐列表 和 右侧的 歌曲信息 及 滚动歌词 )-->
      <div class="play_content_main">
        <LeftCPM />
        <RightCPM />
      </div>
      <!-- 底部的控制区域 -->
      <BottomCPM ref="BottomCPMRef" />
    </div>
    <!-- 大背景的遮罩层 -->
    <div class="player_bg_mask"></div>
    <!-- 大背景 -->
    <div
      class="player_bg"
      :style="{
        backgroundImage: 'url(' + playStoreBgUrl + ')',
      }"
    ></div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import {
  getBanquan,
  getSongsDetails,
  getSongUrl,
  getSongLyric,
} from "../../api/playerApi";
import { parseLyric } from "../../utils/parse-lyric";
import BottomCPM from "./components/bottom.vue";
import LeftCPM from "./components/left.vue";
import RightCPM from "./components/right.vue";
export default {
  name: "player",
  components: { BottomCPM, LeftCPM, RightCPM },
  data() {
    return {
      leftNav: this.$route.params.nav || 0,
      leftNavData: [
        { id: 0, title: "默认播放列表" },
        { id: 1, title: "喜欢的音乐" },
        { id: 2, title: "我的歌单" },
      ],
    };
  },
  created() {
    // setTimeout(() => {
    //   this.getCheckMusic(this.$route.params.id);
    // }, 4000);
    console.log("id是", this.$route.params.id);
    if (this.$route.params.id != "undefined") {
      // 有的情况

      this.getCheckMusic(this.$route.params.id);
    } else {
      // 没有的情况
    }
  },
  computed: {
    ...mapState({
      playStoreCurrentSong: (state) => state.playerStore.currentSong,
      playStoreIsPlaying: (state) => state.playerStore.isPlaying,
      playStoreBgUrl: (state) => state.playerStore.bgUrl,
    }),
  },
  watch: {
    "$route.params.id": {
      async handler(newValue, oldValue) {
        if (newValue != oldValue) {
          //  发现不一样
          // this.watchPlayPageId(newValue);
          // 检测是否有版权
          try {
            let result = await getBanquan(newValue);
            if (result.success) {
              // 有版权继续 请求详细信息
              await this.getSongDetail(newValue);
              await this.getSongUrl(newValue);
              await this.getSongLyric(newValue);
              this.changeIsPlaying(false);
              this.changeLyricYMutations(0);
              this.changeCurrentLyricIndexMutations(0);
              // console.log(this.$refs.BottomCPMRef.$refs.songAudioRef);
              this.$refs.BottomCPMRef.$refs.songAudioRef.play().then(
                () => {
                  console.log("播放");
                  this.changeIsPlaying(true);
                },
                (err) => {
                  console.log(err);
                }
              );
            }
          } catch (error) {
            console.log(error);
            this.$message({
              type: "error",
              message: error.message,
            });
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    ...mapMutations("playerStore", [
      "changeSongsListMutations",
      "changeCurrentSongMutations",
      "changeSongUrlMutations",
      "changeLyricListMutations",
      "changeIsPlaying",
      "watchPlayPageId",
      "changeLyricYMutations",
      "changeCurrentLyricIndexMutations",
    ]),
    // 获取歌曲的详细信息
    async getSongDetail(id) {
      try {
        let result = await getSongsDetails(id);
        // console.log("即将获取 歌曲的详细信息", result);
        if (result.code === 200) {
          this.changeSongsListMutations(result.songs[0]);
          this.changeCurrentSongMutations(result.songs[0]);
        }
      } catch (error) {}
    },
    // 检查此歌曲是否有版权
    async getCheckMusic(id) {
      try {
        let result = await getBanquan(id);
        if (result.success) {
          // 有版权继续 请求详细信息
          this.getSongDetail(this.$route.params.id);
          this.getSongUrl(this.$route.params.id);
          this.getSongLyric(this.$route.params.id);
        }
      } catch (error) {
        console.log(error);
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
    //  获取歌曲 播放的 url 地址
    async getSongUrl(id) {
      try {
        const result = await getSongUrl(id);
        if (result.code === 200) {
          // this.songUrl = result.data[0].url;
          this.changeSongUrlMutations(result.data[0].url);
        }
      } catch (error) {}
    },
    // 根据 id 获取歌曲的歌词
    async getSongLyric(id) {
      try {
        const result = await getSongLyric(id);

        if (result.code === 200) {
          // console.log(result);
          let arr = parseLyric(result.lrc.lyric);
          this.changeLyricListMutations(arr);
          // console.log("歌词", arr);
        }
      } catch (error) {}
    },
    leftNavClickMethod(item) {
      this.leftNav = item.id;
      // if (item.id == 1) {
      //   // console.log("需要判断用户是否登录");
      //   let link = this.$router.resolve({
      //     path: `/player//1`, //要跳转的路由
      //   });
      //   window.open(link.href, "player"); //打开新窗口
      //   sessionStorage.setItem("open", true);
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.player {
  position: relative;
  width: 100%;
  height: 100vh;
  font-size: 14px;
  color: #ffffff;

  .play_content {
    position: relative;
    height: 100vh;
    // background-color: red;
    padding-bottom: 120px;
    // 左边三个定位
    .play_content_nav {
      position: absolute;
      top: 100px;
      left: -140px;
      width: 140px;
      z-index: 4;
      color: red;
      ul li {
        font-size: 16px;
        height: 60px;
        line-height: 60px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
          color: @globalColor;
        }
        &.active {
          color: @globalColor;
        }
      }
    }
    .play_content_main {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 5;
      width: 100%;
      display: flex;
      height: calc(100vh - 100px);
    }
  }
  .player_bg_mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    // transition: background-color 5s ease-out;
  }
  .player_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(65px);
    // background-image: url("https://cdnmusic.migu.cn/picture/2022/0103/0107/AS86260dd164f04b54849343c1e724b7d9.jpg");
    opacity: 0.6;
    transform: translateZ(0);
  }
}
</style>
